<template>
    <div style="position: relative;">
        <div class="tt_top" @click="$router.push('/organizations')">{{ TITLE.organizations }}:{{ organizations }}</div>
        <div class="top">
            <div style="position: relative;">
                <h3>检查检验统计</h3>
                <div class="radio">
                    <el-radio-group v-model="searchEquip">
                        <el-radio-button label="日" value="day" />
                        <el-radio-button label="周" value="weak" />
                        <el-radio-button label="月" value="month" />
                        <el-radio-button label="年" value="year" />
                        <el-radio-button label="全部" value="all" />
                    </el-radio-group> <span style="margin-left: 12px;cursor: pointer;"
                        @click="$router.push('/equipment')">更多</span>
                </div>
                <div id="box1" @click="$router.push('/equipment')"></div>
            </div>
            <Box2 id="box2"></Box2>
            <div style="position: relative;">
                <h3>双向转诊情况</h3>
                <el-radio-group class="radio" v-model="searchReferral">
                    <el-radio-button label="日" value="day" />
                    <el-radio-button label="周" value="weak" />
                    <el-radio-button label="月" value="month" />
                    <el-radio-button label="年" value="year" />
                    <el-radio-button label="全部" value="all" />
                </el-radio-group>
                <div id="box3" @click="$router.push('/referral')"></div>
            </div>
        </div>
        <div class="bottom">
            <div id="box4">
                <h3>双向转诊情况（近30日）</h3>
                <div class="blank"></div>
                <Box4 :height="bottomBoxsHeight" :width="bottomBoxWidth" @click="$router.push('/referral')"></Box4>
            </div>
            <div>
                <h3>累计转诊统计</h3>
                <div style="display: flex;padding-left: 20px;">
                    <div class="bottom-right">
                        <div id="box5" @click="$router.push('/referral_1')"></div>
                        <div>上转检查检验</div>
                        <div class="total">{{ total_1 }}</div>
                    </div>
                    <!-- <div class="bottom-right">
                        <div id="box6" @click="$router.push('/referral_2')"></div>
                        <div>上转门诊、住院、日间手术室</div>
                        <div class="total">{{ total_2 }}</div>
                    </div>
                    <div class="bottom-right">
                        <div id="box7" @click="$router.push('/referral_3')"></div>
                        <div>下转康复</div>
                        <div class="total">{{ total_3 }}</div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { EDP, REANIMATIONTIME } from '@b/model/enum';
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { TITLE } from "@b/model/enum";
import { ElRadioButton, ElRadioGroup } from "element-plus";
import { Box1 } from "@/components/charts/box1";
import Box2 from "@/components/charts/box2.vue";
import { Box3 } from '@/components/charts/box3';
import Box4 from "@/components/charts/box4.vue";
import { Box5 } from '@/components/charts/box5';
// import { Box6 } from '@/components/charts/box6';
// import { Box7 } from '@/components/charts/box7';
import { Http } from '@b/model/base/http';

const topBoxsHeight = ref(EDP.HEIGHT / 3 + 80 + 'px')
const topBoxsWidth = ref(EDP.WIDTH / 4 + 'px')
const topBoxWidth = ref(EDP.WIDTH / 2 - 80 + 'px')
const bottomBoxsHeight = ref(EDP.HEIGHT / 2 - 120 + 'px')
const bottomBoxsWidth = ref(EDP.WIDTH * 0.33 + 'px')
const bottomBoxWidth = ref(EDP.WIDTH * 0.67 + 'px')
const box1 = new Box1(topBoxsWidth.value, topBoxsHeight.value)
const box3 = new Box3(topBoxsWidth.value, topBoxsHeight.value)
const box5 = new Box5(bottomBoxsWidth.value, bottomBoxsHeight.value)
// const box6 = new Box6(bottomBoxsWidth.value, bottomBoxsHeight.value)
// const box7 = new Box7(bottomBoxsWidth.value, bottomBoxsHeight.value)
const total_1 = ref(0)
const total_2 = ref(0)
const total_3 = ref(0)
const organizations = ref(0)
let timer: any = null;

const searchEquip = ref('all')
const searchReferral = ref('all')

watch(searchEquip, (val) => {
    box1.changeData(val)
})
watch(searchReferral, (val) => {
    box3.changeData(val)
})
onMounted(async () => {
    organizations.value = await new Http().request('/v1/bigscreen/CountWorkStation', { method: 'GET', cache: true })
    box1.init()
    box1.changeData('all')
    box3.init()
    box3.changeData('all')
    box5.init()
    // box6.init()
    // box7.init()
    const getAcumulate = async () => {
        const res = await new Http().request('/v1/bigscreen/GetAcumulate', { method: 'GET', cache: true })
        if (res) {
            total_1.value = 816
            total_2.value = 0
            total_3.value = 0
            const data5: { name: string, value: number }[] = res.examAssem
            const data6: { name: string, value: number }[] = [...res.transferTreatInfo, res.rjssAndRecovery[0]]
            data5.forEach(item => {
                total_1.value += item.value
            })
            data6.forEach(item => {
                total_2.value += item.value
            })
            box5.changeData(data5, total_1.value)
            // box6.changeData(data6, 0)
            // box7.changeData([], 0)
        }
    }
    getAcumulate()
    timer = setInterval(async () => {
        getAcumulate()
    }, REANIMATIONTIME)
})
onUnmounted(() => {
    clearInterval(timer)
})
</script>

<style scoped>
.tt_top {
    position: absolute;
    right: 2em;
    top: -60px;
    font-size: 1.4em;
    cursor: pointer
}

.top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: v-bind(topBoxsHeight);
    margin-bottom: 14px;
}

.bottom {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.radio {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
}

#box1,
#box3 {
    height: 100%;
    width: v-bind(topBoxsWidth);
}

#box2 {
    height: 100%;
    width: v-bind(topBoxWidth);
    height: calc(v-bind(topBoxsHeight));
}

#box4 {
    width: v-bind(bottomBoxWidth);
    height: v-bind(bottomBoxsHeight);
}

.bottom-right {
    width: v-bind(bottomBoxsWidth);
    height: v-bind(bottomBoxsHeight);
    text-align: center;
    font-size: 1.2em;
}

.bottom-right .total {
    font-size: 1.4em;
}
</style>